<template>
  <div style="text-align: left">
    <a-button class="editable-add-btn" @click="showModal1">添加</a-button>
    <a-input-search placeholder="请输入名称关键字" style=" width: 200px" @search="onSearch" v-model="keyword"/>
    <br />
    <a-table bordered :data-source="list" :columns="columns"  rowKey='shop' :pagination="paginationOpt">
      <template slot="name"> </template>
      <template slot="operation" slot-scope="text, record">
        <a @click="() => showModal2(record)">修改</a>
        <a-popconfirm
          v-if="list.length"
          title="确定删除?"
          @confirm="() => onDelete(record.id)"
        >
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </template>
    </a-table>
    <a-modal v-model="addVisible" title="添加" on-ok="handleAdd">
      <template slot="footer">
        <a-button key="back" @click="addVisible=false">
          取消
        </a-button>
        <a-button key="submit" type="primary" @click="handleAdd">
          提交
        </a-button>
      </template>
      <p>
        店铺所属：<input type="text" style="margin-left:30px" v-model="obj.areaCode"><br>
        店铺编号：<input type="text" style="margin-left:30px" v-model="obj.no"><br>
      </p>
    </a-modal>

    <a-modal v-model="editVisible" title="修改" on-ok="edit">
      <template slot="footer">
        <a-button key="back" @click="editVisible=false">
          取消
        </a-button>
        <a-button key="submit" type="primary" @click="edit">
          提交
        </a-button>
      </template>
      <p>

        店铺编号：<input type="text" style="margin-left:30px"  v-model="obj.no"><br>
      </p>
    </a-modal>

  </div>

</template>

<script>
    import axios from 'axios'
    export default {
        name: 'shop',
        data: function () {
            return  {
                wareHouseUrl:this.baseURL+"shop.ctl",

                list:[],
                obj:{},
                keyword:'',
                selectkey:'',
                columns: [
                    {
                        title: '序号',
                        customRender: function(t, r, index) {
                            return parseInt(index) + 1
                        },
                    },
                    {
                        title: '店铺地址',
                        dataIndex: 'areaCode',
                        width: '30%',
                    },
                    {
                        title: '店铺编号',
                        dataIndex: 'no'

                    },
                    {
                        title: '店铺主',
                        dataIndex: 'shopowner.name'

                    },
                    {
                        title: '操作',
                        scopedSlots: { customRender: 'operation' },
                    },
                ],
                addVisible:false,
                editVisible:false,
                // 分页
                paginationOpt: {
                    defaultCurrent: 1, // 默认当前页数
                    defaultPageSize: 5, // 默认当前页显示数据的大小
                    total: 0, // 总数，必须先有
                    showSizeChanger: true,
                    showQuickJumper: true,
                    pageSizeOptions: ["5", "10", "15", "20"],
                    showTotal: (total) => `共 ${total} 条`, // 显示总数
                    onShowSizeChange: (current, pageSize) => {
                        this.paginationOpt.defaultCurrent = 1;
                        this.paginationOpt.defaultPageSize = pageSize;
                        //this.searchCameraFrom(); //显示列表的接口名称
                    },
                    // 改变每页数量时更新显示
                    onChange: (current, size) => {
                        this.paginationOpt.defaultCurrent = current;
                        this.paginationOpt.defaultPageSize = size;
                        //this.searchCameraFrom();
                    },
                }
            }
        },

        methods: {

            getSchoolList(){
                var arr = this;
                if(this.selectkey!='')
                    axios.get(this.wareHouseUrl+"?"+this.selectkey).then((response) => {//根据选中的节点改变教师对象列表
                        arr.list=response.data;
                    })
                else
                    axios.get(this. wareHouseUrl).then((response) => {
                        arr.list=response.data;
                    })
            },
            showModal1() {
                this.addVisible = true;
                this.obj={};
            },
            showModal2(obj) {
                this.editVisible = true;
                this.obj=obj;
            },
            edit:function (id){
                axios.put(this.wareHouseUrl,this.obj).then((res)=>{
                    alert(res.data.message);
                    this.obj={}
                });
                this.editVisible=false;
                this.getSchoolList();
            },
            onDelete(id){
                axios.delete(this.wareHouseUrl+"?id="+id).then(res => { //这里后台有错，有专业数据的学院删不掉，也提示删除成功
                    alert(res.data.message);
                    this.getSchoolList();
                })

            },
            handleAdd(){
                axios.post(this.wareHouseUrl,this.obj).then((res)=>{
                    alert(res.data.message);
                    this.obj={}
                })
                this.addVisible=false;
                this.getSchoolList();
            },
            onSearch(){
                var arr = this;
                //需要后台对每一个字段做模糊查询
                axios.get(this.wareHouseUrl+"?id="+this.keyword).then((response) => {
                    arr.list=response.data;
                })
            }
        },
        created(){
            this.getSchoolList();
        }
    }
</script>

<style scoped>
  table{
    margin-top:50px;
    width:90%;
  }
  tr{
    line-height: 40px;
  }
  td{border-bottom: solid 1px #eee;}

  div p{ line-height: 50px;}
  div p input {line-height: 28px;}

</style>
